<template>
  <div class="letter" ref="letterRef">
    <div class="image-bg-box box1" :class="{ 'top': currentPage > 1, 'current': currentPage === 1 }">
      <img class="image-bg" draggable="false" src="/images/letter/bg_img_1.gif" alt="">
    </div>
    <!-- <div class="image-bg-box box2"
      :class="{ 'top': currentPage > 2, 'current': currentPage === 2, 'bottom': currentPage < 2 }">
      <img class="image-bg" draggable="false" src="/images/letter/bg_img_2.jpg" alt="">
    </div> -->
    <div class="image-bg-box box2"
      :class="{ 'top': currentPage > 2, 'current': currentPage === 2, 'bottom': currentPage < 2 }">
      <img class="image-bg" draggable="false" src="/images/letter/bg_img_3.jpg" alt="">

      <div class="content">
        <pre class="label">{{ letterContent }}</pre>
      </div>
    </div>

    <div class="image-bg-box box4" :class="{ 'current': currentPage === 3, 'bottom': currentPage < 3 }">
      <img class="image-bg" draggable="false" src="/images/letter/bg_img_4.jpg" alt="">
    </div>

    <div class="paging-icon" v-show="currentPage !== 3"></div>

    <div class="music-icon" @click.stop="onToggleMusic" :class="{ 'music-stop': !isMusicPlay }">
      <img src="@/assets/icons/icon-music.png" alt="">
      <div class="line" v-show="!isMusicPlay"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { isPc } from '@/utils/util';
import letter from '@/api/letter'

const route = useRoute();

const letterRef = ref();
const currentPage = ref(1);
const isMusicPlay = ref(false);
const letterContent = ref('祝您生日快乐！');
const isTurning = ref(false); // 翻页中
let bgMusic: HTMLAudioElement;

// 初始化事件
function initLetterEvent() {
  const elem = letterRef.value;
  let startY = 0;
  elem.addEventListener('touchstart', (e: TouchEvent) => {
    if (isTurning.value) {
      return;
    }
    startY = e.changedTouches[0].pageY;
  }, false)
  elem.addEventListener('touchend', (e: TouchEvent) => {
    if (isTurning.value) {
      return;
    }
    const endY = e.changedTouches[0].pageY;
    if (startY > endY) {
      console.log('上滑');
      if (currentPage.value < 3) {
        currentPage.value++;
      }
    } else if (startY < endY) {
      console.log('下滑');
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    }

    turningWait();
  }, false)
}
function initPcEvent() {
  const elem = letterRef.value;
  let startY = 0;
  let isMouseDown = false;
  elem.addEventListener('mousedown', (e: MouseEvent) => {
    if (isTurning.value) {
      return;
    }
    startY = e.pageY;
    isMouseDown = true;
  }, false);
  elem.addEventListener('mouseup', (e: MouseEvent) => {
    if (isTurning.value) {
      return;
    }
    const endY = e.pageY;
    if (startY > endY) {
      console.log('上滑');
      if (currentPage.value < 3) {
        currentPage.value++;
      }
    } else if (startY < endY) {
      console.log('下滑');
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    }
    isMouseDown = false;
    turningWait();
  }, false)
}

// 翻页过程中，不能进行翻页
function turningWait() {
  isTurning.value = true;
  setTimeout(() => {
    isTurning.value = false;
  }, 400)
}

function initBgMusic() {
  bgMusic = new Audio('./audio/letter.mp3');
  bgMusic.loop = true;
  bgMusic.autoplay = true;
}

// 音乐开关
function onToggleMusic() {
  isMusicPlay.value = !isMusicPlay.value;
  if (isMusicPlay.value) {
    bgMusic.play();
  } else {
    bgMusic.pause();
  }
}

function getCard() {
  const cardId = <string>route?.query?.id;
  if (!cardId) {
    return
  }
  letter.getCard({ id: cardId }).then(res => {
    letterContent.value = res.data
    console.log(res);
  })
}

onMounted(() => {
  if (isPc()) {
    initPcEvent();
  } else {
    initLetterEvent();
  }
  initBgMusic();
  getCard();
});

</script>
<style lang="less" scoped>
.letter {
  width: 100%;
  height: 100%;
  position: relative;

  .image-bg-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .8s;

    &.top {
      top: -100%;
    }

    &.current {
      top: 0%;
    }

    &.bottom {
      top: 100%;
    }

    &.box2 {
      .content {
        position: absolute;
        top: 30%;
        left: 12%;
        width: 76%;
        height: 56%;
        overflow: hidden;
        padding: 0 20px;

        .label {
          margin: 0;
          font-size: .8rem;
          color: #ff4f4d;
          white-space: pre-wrap;
          letter-spacing: 4px;
        }
      }
    }

    .image-bg {
      z-index: 1;

      &.image-show {
        z-index: 2;
      }

      &.open-img {
        z-index: 10;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .paging-icon {
    position: fixed;
    left: 50%;
    bottom: 10%;
    margin-left: -25PX;
    z-index: 4;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    width: 50PX;
    height: 50PX;
    animation: slide-next-page 1.5s linear infinite;
    cursor: pointer;

    &::before,
    &::after {
      content: "";
      width: 14PX;
      height: 14PX;
      box-shadow: 2PX -2PX 1PX 2PX rgba(0, 0, 0, .1);
      border-color: #fff;
      border-style: solid;
      border-width: 6PX 6PX 0 0;
      transform: rotate(-45deg);
    }

    &::before {
      margin-top: -3PX;
      border-color: hsla(0, 0%, 100%, .3);
    }
  }

  @keyframes slide-next-page {
    0% {
      bottom: 14%;
      opacity: 0.5;
    }

    100% {
      bottom: 20%;
      opacity: 1;
    }
  }

  .music-icon {
    position: absolute;
    width: .9rem;
    height: .9rem;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    padding: 10px;
    background-color: rgba(0, 0, 0, .4);
    top: 50px;
    right: 50px;
    animation: rotate-music 3s linear infinite;
    z-index: 999;

    @keyframes rotate-music {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(1turn);
      }
    }

    &.music-stop {
      animation-play-state: paused;
    }

    .line {
      width: 60%;
      height: 2px;
      position: absolute;
      top: 44%;
      left: 20%;
      z-index: 2;
      background-color: #fff;
    }
  }
}
</style>
<style>
#app {
  max-width: 580PX;
  margin: 0 auto;
}
</style>